<template>
  <div class="video">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl" @click="goSearch">
        <img class="tit_fl_img" src="../assets/img/search@2x.png" alt />
      </div>
      <span>视频</span>
    </div>
    <div class="video_head">
      <img :src="videoBanner" alt />
    </div>
    <!-- 底部商品选择详情 -->
    <div class="product">
      <!-- 上方导航 -->
      <div class="product_list">
        <div class="wrapper" ref="wrapper">
          <ul class="product_item" :style="sliderStyle">
            <li
              v-for="(item,index) in cateVideoArr"
              :key="index"
              :class="currentNav == index? 'isShowNav':''"
              @click="classDetail(item.course_id, index)"
            >{{item.course_name}}</li>
          </ul>
        </div>
        <div class="selection" @click="showTimeScree">
          <img src="../assets/myImg/up@2x.png" alt />
          <img src="../assets/myImg/down@2x.png" alt />
        </div>
      </div>
      <!-- <transition name="slide-fade"> -->
      <!-- 时间筛选 查看更多数据 -->
      <!-- <ul class="timeScree" v-show="isShowTimeScree">
          <li
            class="timeScree_item"
            @click="getListByTime(item)"
            v-for="(item,index) in timeScreeList"
            :key="index"
          >{{item}}</li>
      </ul>-->
      <!-- </transition> -->

      <!-- 下方详情 -->
      <scroll
        class="content"
        ref="scroll"
        :probe-type="3"
        :pull-up-load="true"
        @touchEnd="touchEnd"
        :maxHeight="56"
        @scroll="contentScroll"
      >
        <ul class="product_deta">
          <li
            class="product_deta_item"
            @click="goVideoDetail(item.chapter_id)"
            v-for="(item,index) in cateVideoList"
            :key="index"
          >
            <img class="deta_item_img" :src="item.chapter_avatar" alt />
            <div class="deta_item_fr">
              <h2 class="fr_h2">{{item.chapter_name}}</h2>
              <span class="fr_sp" v-html="item.desc"></span>
              <div class="fr_con">
                <div class="con_fl">
                  <!-- <img class="con_fl_img" src="../assets/img/huo@2x.png" alt /> -->
                  <!-- <span>36984</span> -->
                </div>
                <span>{{item.create_time | moments}}</span>
              </div>
            </div>
          </li>
          <li class="isShowTit" v-show="isShowTit">暂无更多数据</li>
        </ul>
      </scroll>
    </div>
    <van-popup round v-model="isShowTimeScree" position="right" :style="{ height: '66%',}">
      <ul class="timeScree">
        <li
          class="timeScree_item"
          @click="getListByTime(item)"
          v-for="(item,index) in timeScreeList"
          :key="index"
        >{{item}}</li>
      </ul>
    </van-popup>
    <BackTop @click.native="clickTop" v-show="isShowBackTop"></BackTop>
    <MainTabBar></MainTabBar>
  </div>
</template>

<script>
import axios from "axios";
// 时间格式处理
import moment from "moment";
import MainTabBar from "../components/content/MainTabBar";

// 滑动组建
import Bscroll from "better-scroll";
import Scroll from "../components/common/scroll/Scroll";
 
// 节流函数
import { throtTling } from "../utils/throttling";
import { getBanner, getCourseList, getCateVideo } from "../api/video";
import { getCateTime, getListByTime } from "../api/common";

export default {
  name: "Video",
  components: {
    Scroll,
    MainTabBar, 
  },
  data() {
    return {
      videoBanner: "",
      // 是否显示时间框
      isShowTimeScree: false,
      // 筛选的列表
      timeScreeList: "",
      // 当前选中的分类id
      currentId: "",
      // 当前选中高亮
      currentNav: "0",
      // 是否显示暂无数据
      isShowTit: false,
      // 返回顶部
      isShowBackTop: false,
      // 每页几条数据
      limit: 5,
      // 页数
      page: 1,
      courseList: "",
      cateVideoList: "",
      cateVideoArr: [],
      // 动态改变父元素的宽度
      sliderStyle: {
        width: "",
      },
    };
  },
  methods: {
    // 前往搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },
    // 点击导航查看详情
    classDetail(id, index) {
      this.currentNav = index;
      this.currentId = id;
      this.page = 1;
      this.isShowTit = false;
      this.isShowTimeScree = false;
      getCateVideo(id, this.limit, this.page).then((res) => {
        if (res.code == 200) {
          this.cateVideoList = res.data.data;
        } else {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
    // 点击进入视频详情
    goVideoDetail(id) {
      this.$router.push({ name: "VideoDetail", query: { id } });
    },
    // 获取数组第一条id
    courseListArr(info) {
      Object.keys(info).forEach((key) => {
        this.cateVideoArr.push(info[key]);
      });
      // 根据列表数据动态的设置ul宽度
      this.sliderStyle.width = this.cateVideoArr.length * 1.4 + "rem";
      this.currentId = this.cateVideoArr[0].course_id;
      getCateVideo(this.cateVideoArr[0].course_id, this.limit, this.page).then(
        (res) => {
          if (res.code == 200) {
            this.cateVideoList = res.data.data;
          } else {
            this.$toast({
              message: res.msg,
            });
          }
        }
      );
    },
    // 监听滚动
    contentScroll(position) {
      if (position.y < -300) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 筛选时间
    showTimeScree: throtTling(function () {
      this.isShowTimeScree = !this.isShowTimeScree;
      getCateTime(this.currentId).then((res) => {
        if (res.code == 200) {
          this.timeScreeList = res.data;
        } else {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    }, 1000),
    // 根据时间和分类筛选更多内容
    getListByTime(item) {
      this.page = 1;
      this.isShowTit = false;
      getListByTime(item, this.currentId, this.limit, this.page).then((res) => {
        if (res.code == 200) {
          this.cateVideoList = res.data;
          this.isShowTimeScree = false;
          // this.$toast({
          //   duration: 1000,
          //   message: res.msg,
          // });
        } else {
          this.$toast({
            duration: 1000,
            message: res.msg,
          });
        }
      });
    },
    // 返回顶部
    clickTop() {
      this.$refs.scroll.scrollTo(0, 0);
    },
    // 上拉加载更多
    touchEnd: throtTling(function (y) {
      if (y < -120 && !this.isShowTit) {
        let pages = (this.page += 1);
        getCateVideo(this.currentId, this.limit, pages).then((res) => {
          if (res.code == 200) {
            this.cateVideoList.push(...res.data);
            this.page += 1;
            this.isShowTit = false;
          } else {
            this.isShowTit = true;
          }
        });
        this.$refs.scroll.finishPullUp();
        // 重新计算高度
        this.$refs.scroll.refresh();
      }
    }, 2000),
  },
  filters: {
    moments(time) {
      return moment(time).format("YYYY/MM/DD");
    },
  },

  mounted() {
    // 批量请求
    axios.all([getBanner("精彩365"), getCourseList(5)]).then(
      axios.spread((res, city) => {
        if (res.code == 200 && city.code == 200) {
          this.videoBanner = res.data;
          this.courseList = city.data;
          this.courseListArr(this.courseList);
        }
      })
    );
    // 初始化滑动
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        scrollX: true,
        click: true,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.video {
  margin: 0 0.373333rem;
  height: calc(100vh - 1.333rem);
}

.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    background: #eaeaea;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}

.video_head {
  height: 3.813333rem;
  img {
    width: 100%;
  }
}
// 底部商品展示详情
.product {
  position: relative;
  height: 8rem;
  background: #fff;
  .product_list {
    position: relative;
    display: flex;
    height: 1.84rem;
    line-height: 1.84rem;
    border-bottom: 0.16rem solid #f9f9f9;
    span {
      font-size: 0.506667rem;
      color: #647cfa;
      font-weight: 700;
    }
    .product_item {
      overflow: hidden;
      font-size: 0.4rem;
      color: #333333;
      li {
        float: left;
        padding: 0 0.266667rem;
        text-align: center;
      }
    }
    .wrapper {
      width: 8.533333rem;
      overflow: hidden;
    }
    .selection {
      position: absolute;
      right: 0;
      padding-top: 0.666667rem;
      width: 0.213333rem;
      line-height: 0;
      img {
        width: 0.213333rem;
        height: 0.213333rem;
      }
    }
  }

  .product_deta {
    .product_deta_item {
      display: flex;
      justify-content: space-between;
      margin-top: 0.266667rem;
      height: 2.2rem;
      .deta_item_img {
        width: 3.48rem;
        height: 100%;
      }
      .deta_item_fr {
        margin-left: 0.266667rem;
        flex: 1;
        font-size: 0.293333rem;
        color: #6a6f72;
        .fr_h2 {
          margin: 0.266667rem 0;
          font-size: 0.346667rem;
          color: #282e36;
        }
        .fr_sp {
          width: 5.333333rem;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fr_con {
          display: flex;
          justify-content: space-between;
          margin-top: 0.106667rem;
          height: 0.533333rem;
          .con_fl {
            color: #ff6801;
            .con_fl_img {
              margin-right: 0.133333rem;
              width: 0.293333rem;
              height: 0.293333rem;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
// 时间选择
.timeScree {
  margin: 0.266667rem;
  font-size: 0.373333rem;
  .timeScree_item {
    margin: 0.533333rem 0;
  }
}
</style>